<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--   1. .stop修饰符的使用-->
    <div @click="divClick">
        aaaaaaaa
        <button @click.stop="btnClick">按钮</button>
    </div>

<!--  2.  .prevent修饰符的使用-->
<!--    阻止submit自动提交-->
    <br>
    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick">
    </form>

<!--    3. .监听某个键盘的键帽-->
    <input type="text" @keyup.enter="keyUp">

<!--    4.  .once修饰符的作用-->
    <button @click.once="btn2Click">按钮2</button>

</div>

<script src="../../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        methods: {
            btnClick() {
                console.log("btnClick");
            },
            divClick() {
                console.log("divClick");
            },
            submitClick() {
                console.log("submitClick");
            },
            keyUp() {
                console.log('keyUp');
            },
            btn2Click() {
                console.log('btn2Click');
            }
        }
    })
</script>

</body>
</html>